<template>
	<!-- 商品分类  -->
	<div class="component-item">
		<div class="goods-cate-box" :style="{
	        'background': 'linear-gradient(90deg, ' + item.bgColor1 + ' 0%, ' + item.bgColor2 + ' 100%)',
	        'margin-top': item.pageMargin + 'px'
	    }">
			<div class="goods-cate">
				<div class="item" v-for="(item2, index2) in goodsCate" :key="item2.id"
					 :class="{'on': index2 == 0}" :style="{'color': item.fontColor}">{{ item2.name }}<span></span></div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "cate",
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		data() {
			return {
				goodsCate: []
			}
		},
		mounted() {
			this.getGoodsCate()
		},
		methods: {
			// 获取商品分类
			async getGoodsCate() {
				let res = await this.$api.home.getGoodsCate.get()
				this.goodsCate = res.data
			},
		}
	}
</script>

<style>
</style>